<template>
    <div >
      <h1>订单列表</h1>
      <table>
        <thead>
          <tr>
            <th>订单ID</th>
            <th>用户ID</th>
            <th>价格</th>
            <th>收货地址</th>
            <th>备注</th>
            <th>是否支付</th>
            <th>是否取消</th>
            <th>创建时间</th>
            <th>商品详情</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orderList" :key="order.order_id">
            <td>{{ order.order_id }}</td>
            <td>{{ order.user_user_id }}</td>
            <td>{{ order.price }}</td>
            <td>{{ order.address_area }} {{ order.address_detail }}</td>
            <td>{{ order.note }}</td>
            <td>{{ order.is_pay ? '已支付' : '未支付' }}</td>
            <td>{{ order.is_cancel ? '已取消' : '未取消' }}</td>
            <td>{{ order.create_time }}</td>
            <td>
              <ul>
                <li v-for="goods in order.goods" :key="goods.goods_goods_id">
                  商品ID: {{ goods.goods_goods_id }}, 数量: {{ goods.count }}
                </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        orderList: []
      };
    },
    mounted() {
      this.fetchOrderList();
    },
    methods: {
      fetchOrderList() {
        // 调用订单列表的 API 接口获取订单数据
        this.$http
          .get('/order/orders')
          .then((response) => {
            this.orderList = response.data;
          })
          .catch((error) => {
            console.error('获取订单列表失败:', error);
          });
      }
    }
  };
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  -webkit-user-select: text;
  user-select: text; 

  }

  </style>
  
